<template>
	<slide-page-right-tab 
		title="测评内容"
		class="practise-content">
		<div class="flex">
			<glass-input 
				v-model="newWord"
				placeholder="请输入测评文字">
			</glass-input>
			<glass-button 
				color="blue"
				@click="addWord">
				+ 添加
			</glass-button>
		</div>
		<p class="practise-content__title">
			已添加的测评文字
		</p>
		<div class="practise-content__added-words">
			<glass-tag 
				v-for="(word,index) in addedWords"
				:key="word"
				:index="index"
				@close="delWord"
				closable>
				{{ word }}
			</glass-tag>
		</div>
		<glass-button
			class="practise-content__start-test-btn"
			color="blue"
			@click="startTest">
			<span class="cuIcon-service"></span>
			开始测评
		</glass-button>
	</slide-page-right-tab>
</template>

<script>
	import slidePageRightTab from '../../components/slide-page-right/slide-page-right-tab.vue'
	import GlobalData from '../../common/global.js'
    export default {
		components: {
			slidePageRightTab,
		},
        data() {
            return {
				newWord: '',
				addedWords: GlobalData.trainWords
            }
        },
		methods: {
			addWord() {
				const validWords = this.newWord 
								&& !(this.addedWords.indexOf(this.newWord) !== -1)
				if(!validWords) {
					// 弹出错误信息
					return
				}
				this.addedWords.push(this.newWord)
				this.newWord = ''
			},
			delWord(index) {
				this.addedWords.splice(index, 1)
			},
			startTest() {
				this.$emit('startTest')
			}
		}
    }
</script>

<style lang="scss" scoped>
	.practise-content {
		width: 65%;
		
		&__main {
			font-size: 1rem;
			border-radius: 15px;
			padding: 20px 30px;
			height: calc(60vh - 40px);
			overflow: auto;
			background-color: #ffffff29;
			position: relative;
		}
		
		&__title {
			margin: 20px 0;
			font-size: 1.2rem;
		}
		
		&__added-words {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 80%;
			margin-bottom: 40px;
		}
		
		&__start-test-btn {
			position: absolute;
			bottom: 30px;
			width: 200px;
			
			.cuIcon-service {
				margin-right: 10px;
				
			}
		}
		
	}
	
</style>


